<!--
 @Description:商品item
 @author:张静
 @createTime: 2022-7-5 10:37:04 ?F10: AM?
 -->
<template>
	<view class="shop-item card " :style="{ marginBottom: mt }">
		<view class="shop-info flex align-center">
			<div class="imgbox"><image :src="`${info.supplier_img}?imageView2/0/w/140`" mode="widthFix"></image></div>
			<view class="u-flex-1">
				<view class="name">{{ info.supplier_name }}</view>
				<view>销量：{{ info.sales }}</view>
				<view class="mt10 flex align-center">
					<rate :current="info.evaluate" :size="20"></rate>
					<text class="u-primary ml20">{{ info.evaluate }}</text>
				</view>
			</view>
			<view class="btn u-button--success" @tap="navTo(`/pages/shop/shop?id=${info.sid}`)">进入店铺</view>
		</view>
		<view class="goodsbar flex align-start justify-between">
			<view class="goodslist u-flex-1 flex">
				<view class="goods"  @tap="navTo(`/pages/goodsdetails/goodsdetails?id=${item.id}`)" v-for="(item, index) in info.supplier_products.slice(0, 4)" :key="index">
					<view class="imgbox"><image :src="`${item.img_url[0]}?imageView2/0/w/200`" mode="widthFix"></image></view>
					<view class="name text-cut">{{ item.name }}</view>
					<view class="price">
						<text class="symbol">¥</text>
						{{ item.price }}
					</view>
				</view>
			</view>
			<view class="more"><image :src="`${assetsPath}/right.png`" mode="widthFix"></image></view>
		</view>
	</view>
</template>

<script>
import rate from '@/components/rate/rate.vue';
export default {
	name: 'shop-item',
	data() {
		return {
			fav: true
		};
	},
	components: { rate },
	props: {
		info: {
			type: [Object],
			default: () => {}
		},

		showFav: {
			type: Boolean,
			default: !0
		},

		mt: {
			type: [String, Number],
			default: uni.upx2px(20) + 'px'
		}
	},
	methods:{
		navTo(url, type) {
			if (!type) {
				type = 'navigateTo';
			}
			uni[type]({
				url: url
			});
		}
	}
};
</script>

<style scoped lang="scss">
.shop-item {
	padding: 20upx;
	margin-bottom: 20upx;
	.shop-info {
		color: #646464;
		font-size: 24upx;
		padding: 32upx 24upx 20upx;
		line-height: 33upx;
		.imgbox {
			width: 140upx;
			height: 140upx;
			margin-right: 28upx;
			border-radius: 100%;
			overflow: hidden;
			position: relative;
			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.name {
			color: #000;
			font-size: 32upx;
			font-weight: 500;
			line-height: 45upx;
		}
		.btn {
			width: 170upx;
			height: 64upx !important;
			text-align: center;
			line-height: 64upx;
			border-radius: 35upx;
			font-weight: 500;
			font-size: 28upx;
		}
	}
	.goodsbar {
		padding: 0 10upx 30upx 24upx;
	}
	.goodslist {
		.goods {
			width: 140upx;
			font-size: 28upx;
			font-weight: 500;
			& + .goods {
				margin-left: 20upx;
			}
			.name {
				color: #1c1c1e;

				line-height: 40upx;
			}
			.price {
				color: var(--nav-bg);
				.symbol {
					font-size: 20upx;
				}
			}
			.imgbox {
				width: 140upx;
				height: 140upx;
				border-radius: 8upx;
				overflow: hidden;
				position: relative;
				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.more {
		width: 28upx;
		height: 28upx;
		margin-top: 70upx;
		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
}
</style>
